<template>
	<view>
		<u-navbar title="确认订单" back-icon-size='44' :border-bottom='false'></u-navbar>
		<view class="header">
			<view class="top">
				<view class="type">
					单程
				</view>
				<view class="info">
					{{$store.state.searchJp.startAddr}} - {{$store.state.searchJp.endAddr}}
					{{airObj.depTime.split(' ')[1]}}
				</view>
				<view class="more" @click="showDetail =true">
					航班详情<u-icon name="arrow-down" color="#3587F7"></u-icon>
				</view>
			</view>
			<view class="bot">
				<view class="price">
					成人 ¥{{price}} ＋ 机建燃油 ¥{{airTax}}
				</view>
				<view class="icon" @click="navTo('./explain')">
					<u-icon name="question-circle" color="#9C9EB2" size="32"></u-icon>
				</view>

			</view>
		</view>
		<view class="content">
			<view class="passenger">
				<view class="lable">
					选择乘机人
				</view>
				<view class="passenger-ul">
					<view class="passenger-li" v-for="(peo,index) in peoList" :key='index' v-if="peo.checked">
						<view class="checkbox">
							<u-checkbox v-model='peo.checked' @change="changeFn" :name="peo.id" shape="circle">
							</u-checkbox>
						</view>
						<view class="userInfo">
							<view class="name">
								{{peo.id_name}}
							</view>
							<view class="id">
								身份证 {{peo.id_number}}
							</view>
						</view>
					</view>
				</view>
				<view class="btns" @click="navTo('./morePassenger')">
					<image src="../../../static/imgs/addblue.png" mode=""></image>
					<text>选择乘机人</text>
				</view>
			</view>

			<!-- 			<view class="insur">
				<view class="insur-tit">
					<text style="font-size: 28rpx;">让家人更放心</text>
					<text style="font-size: 20rpx;">269万用户出行首选</text>
				</view>
				<view class="insur-box">
					<view class="insur-box-tit">
						航意航延组合险 <u-icon name="error-circle" color="#9C9EB2" size="28"></u-icon>
					</view>
					<view style="white-space: nowrap">
						<scroll-view scroll-x="true">
							<view class="insur-ul">
								<view class="insur-li">

								</view>
								<view class="insur-li">

								</view>
								<view class="insur-li">

								</view>
								<view class="insur-li">

								</view>
							</view>
						</scroll-view>
					</view>
					<view class="line"></view>
					<view class="otherCheck">
						<view class="top">
							<view class="checkboxs">
								<u-checkbox-group>
									<u-checkbox v-model='checked' shape="circle"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="title">
								国内旅行险 <u-icon name="error-circle" color="#9C9EB2" size="28"></u-icon>
							</view>
							<view class="price">
								保三天 ¥50/人 <u-icon name="arrow-down" color="#3587F7" size="28"></u-icon>
							</view>
						</view>
						<view class="bot">
							多种保障，专为出行定制
						</view>
					</view>
					<view class="line" style="margin-top: 0;"></view>
					<view class="text">
						保险说明：想防范大病风险，职场人需要买医疗险和重疾险，那是不是只买这两种保险就够了呢？并不是，职场人不仅可能会遭遇疾病。
					</view>
				</view>
			</view> -->

			<view class="userinfo">
				<view class="lable">
					联系人信息
				</view>
				<view class="inputBox">
					<view class="phone">
						境内手机 ＋86
					</view>
					<u-input v-model="linkMobile" placeholder='请输入联系人手机号' />
				</view>
			</view>

			<view class="welfaredis">
				<view class="lable">
					福利金抵扣
				</view>
				<view class="checke">
					<u-switch size='30' v-model="welfareCheck" @change="welfareChange"></u-switch>
				</view>
			</view>

		</view>
		<view class="submit">
			<view class="type-price">
				<view class="price">
					<text style="font-size: 28rpx;">¥</text>{{totalPrice}}
				</view>
				<view class="type">
					{{cwText}}
				</view>
			</view>
			<view class="detail" @click="priceDetail=true">
				明细
			</view>
			<view class="topay" @click="toPay">
				去支付
			</view>
		</view>
		<u-popup v-model="showDetail" mode="bottom" :mask-close-able='false'>
			<view class="detailPop">
				<view class="top">
					<view class="type">
						单程
					</view>
					<view class="planeid">
						<text>{{airObj.company}}{{airObj.flightNo}}</text>
					</view>
					<view class="time">
						{{airObj.depTime.split(' ')[1]}}
					</view>
					<view class="howtime">
						总时长 {{totalTime}}
					</view>
				</view>
				<view class="midle">
					<view class="start">
						<view class="time">
							{{airObj.depTime.split(' ')[1]}}
						</view>
						<view class="address">
							{{airObj.depPort}}
						</view>
					</view>
					<image class="airTo" src="../../../static/imgs/airTo.png" mode=""></image>
					<view class="stop">
						<view class="time">
							{{airObj.arrTime.split(' ')[1]}}
						</view>
						<view class="address">
							{{airObj.arrPort}}
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="left">
						成人 ¥{{price}} ＋ 机建燃油 ¥{{airTax}}
					</view>
					<view class="right" @click="showDetail =false">
						收起 <u-icon name="arrow-up" color="#3587F7"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 费用明细 -->
		<u-popup v-model="priceDetail" mode="bottom" closeable>
			<view class="priceBox">
				<view class="title">
					费用明细
				</view>
				<view class="price-ul">
					<view class="price-li">
						<view class="left">
							成人
						</view>
						<view class="right">
							¥{{price}} x {{peoLenth}}
						</view>
					</view>
					<view class="price-li">
						<view class="left">
							机建
						</view>
						<view class="right">
							¥{{airTax}} x {{peoLenth}}
						</view>
					</view>
					<view class="price-li" v-if="welfareCheck && welfare!=0">
						<view class="left">
							福利金
						</view>
						<view class="right">
							- ¥{{welfare}} x {{peoLenth}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 支付方式 -->
		<u-popup v-model="showPay" mode="bottom" :closeable='true' border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				welfareCheck: false,
				weiPaycheck: false,
				alPaycheck: false,
				showPay: false,
				priceDetail: false,
				showDetail: false,
				linkMobile: '', // 联系人手机
				totalTime: '', // 总时长
				airTax: 0, // 机建费
				id: '', // 产品id
				type: '', // 产品类型
				price: 0, // 产品价格
				peoList: [],
				cwText: '', // 舱位名称
				totalPrice: 0, // 总价
				peoLenth: 0, // 乘机人数
				airObj: {}, //航班详情
				seatCode: '', // 舱位
				seatStatus: '', // 舱位状态
				payId: '', // 支付id
				payCode: '', // 支付状态码
				welfare_dis: '',
				welfare: 0, // 福利金
			}
		},
		onLoad(option) {
			this.airTax = option.airTax
			this.price = option.price
			this.id = option.id
			this.type = option.type
			this.cwText = option.cwText
			this.seatCode = option.seatCode
			this.seatStatus = option.seatStatus
			this.welfare = option.flj
		},
		onShow() {
			if (this.$store.state.airPeople.length) {
				this.peoList = this.$store.state.airPeople
				let list = []
				this.peoList.forEach(item => {
					if (item.checked) {
						list.push(item)
					}
				})
				this.peoLenth = list.length
				this.totalPrice = Number(this.peoLenth) * Number(this.price) + Number(this.airTax) * Number(this.peoLenth)
			}
			if (this.$store.state.airDetail) {
				this.airObj = this.$store.state.airDetail
				let totalTime = utils.countDown(this.airObj.depTime, this.airObj.arrTime)
				this.totalTime = totalTime[1] + 'h' + totalTime[2] + 'm'
			}
		},
		methods: {
			welfareChange(e) {
				if (this.welfare == 0) {
					uni.showToast({
						title: '暂不可使用福利金抵扣',
						icon: 'none'
					})
					return
				}
				if (e) {
					this.welfare_dis = 'Y'
					this.totalPrice = this.totalPrice - Number(this.welfare) * Number(this.peoLenth)
				} else {
					this.welfare_dis = ''
					this.totalPrice = this.totalPrice + Number(this.welfare) * Number(this.peoLenth)
				}
			},
			// 确认支付
			confirmPay() {
				uni.navigateTo({
					url: '../pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			// 准备支付
			async toPay() {
				let {
					peoLenth,
					linkMobile,
					airObj,
					seatCode,
					seatStatus,
					id,
					type,
					peoList,
					welfare_dis,
					welfare
				} = this
				if (peoLenth == 0) {
					uni.showToast({
						title: '请选择乘机人',
						icon: 'none'
					})
					return
				}
				if (!linkMobile) {
					uni.showToast({
						title: '请填写联系人手机号',
						icon: 'none'
					})
					return
				}
				let peoId = ''
				peoList.forEach(item => {
					if (item.checked) {
						peoId += item.id + ','
					}
				})
				peoId = peoId.substring(0, peoId.lastIndexOf(','))

				let res = await myRequest.getAirOrder({
					flight_no: airObj.flightNo,
					dep_code: airObj.depCode,
					arr_code: airObj.arrCode,
					cabin: seatCode,
					dep_date: airObj.depTime,
					cabin_status: seatStatus,
					policy_id: id,
					product_type: type,
					people_id: peoId,
					// welfare_fund: welfare_dis,
					welfare_fund_num: welfare_dis == 'Y' ? welfare*peoLenth : 0
				})
				if (res.status) {
					this.payId = res.pay_id
					this.showPay = true
				} else {
					uni.showToast({
						title: res.msg,
						iocn: 'none'
					})
				}
			},
			// 选择乘机人
			changeFn(e) {
				this.$store.commit('changeAirPeople', this.peoList)
				let list = []
				this.peoList.forEach(item => {
					if (item.id == e.name) {
						list.push(item)
					}
				})
				this.peoLenth = list.length
				this.totalPrice = Number(this.peoLenth) * Number(this.price) + Number(this.airTax) * Number(this.peoLenth)
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 156rpx;
		background-color: #FFFFFF;
		padding: 32rpx 28rpx 26rpx;

		.top {
			display: flex;
			align-items: center;

			.type {
				width: 68rpx;
				height: 32rpx;
				background: #2D8AF8;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
			}

			.info {
				margin-left: 12rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.more {
				margin-left: auto;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
			}
		}

		.bot {
			margin-top: 18rpx;
			display: flex;
			align-items: center;

			.price {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			.icon {
				margin-left: 12rpx;
			}
		}
	}

	.detailPop {
		width: 100%;
		background-color: #FFFFFF;
		padding: 32rpx 0;

		.bot {
			display: flex;
			padding: 10rpx 28rpx;
			align-items: center;

			.left {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			.right {
				margin-left: auto;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
			}
		}

		.top {
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			padding-left: 28rpx;

			.type {
				width: 68rpx;
				height: 32rpx;
				background: #2D8AF8;
				border-radius: 8px;
				text-align: center;
				font-size: 20rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				margin-right: 20rpx;
			}

			.time,
			.howtime {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				margin-right: 20rpx;
			}

			.planeid {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				margin-right: 20rpx;

				image {
					margin-right: 6rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.midle {
			padding-top: 30rpx;
			padding-left: 116rpx;
			display: flex;
			align-items: center;

			.airTo {
				width: 100rpx;
				height: 12rpx;
				margin: 0 64rpx;
			}

			.start,
			.stop {
				.time {

					font-size: 44rpx;
					font-family: Alibaba Sans;
					font-weight: bold;
					color: #333333;
				}

				.address {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.content {
		padding: 32rpx 28rpx 150rpx;

		.insur {
			margin-top: 32rpx;

			.insur-tit {
				width: 694rpx;
				height: 88rpx;

				border-radius: 16rpx 16rpx 0px 0px;
				padding-left: 18rpx;
				padding-right: 26rpx;
				background-color: #FBF3E8;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #E97F26;
			}

			.insur-box {
				width: 694rpx;
				background-color: #FFFFFF;
				padding: 0 18rpx 32rpx;

				.insur-box-tit {
					padding: 30rpx 0;
				}

				.insur-ul {
					width: 100%;

					.insur-li {
						display: inline-block;
						width: 192rpx;
						height: 336rpx;
						background: #F4F7FE;
						border: 2rpx solid #3587F7;
						border-radius: 8rpx;
						margin-right: 18rpx;
					}
				}

				.line {
					margin-top: 34rpx;
					width: 650rpx;
					height: 0px;
					border: 2rpx solid #F2F2F7;
				}

				.text {
					padding-top: 20rpx;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					line-height: 16px;
					color: #999999;
				}

				.otherCheck {
					height: 120rpx;
					padding-top: 20rpx;

					.bot {
						margin-top: 8rpx;
						padding-left: 42rpx;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #999999;
					}

					.top {
						display: flex;
						align-items: center;

						.price {
							margin-left: auto;
						}

						.title {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}

		.passenger {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-bottom: 16rpx;

			.btns {
				margin: 32rpx auto;
				width: 650rpx;
				height: 66rpx;
				background: #F2F2F7;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;

				image {
					margin-right: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}

			.lable {
				width: 694rpx;
				height: 44px;
				padding-top: 24rpx;
				padding-left: 18rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.passenger-ul {
				padding: 0 22rpx;

				.passenger-li {
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #F2F2F7;

					.icon {
						margin-left: auto;
					}
				}
			}
		}

		.welfaredis {
			margin-top: 20rpx;
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.userinfo {
			margin-top: 32rpx;
			width: 100%;
			height: 168rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 18rpx;

			.lable {
				padding: 24rpx 0 20rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.inputBox {
				display: flex;
				align-items: center;

				.phone {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					margin-right: 20rpx;
				}
			}
		}
	}

	.submit {
		width: 100%;
		height: 116rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 0 32rpx;

		.type-price {
			.price {
				font-size: 44rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #3587F7;
			}

			.type {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}

		.detail {
			margin-left: 300rpx;
		}

		.topay {
			margin-left: auto;
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient(126deg, #F5B053 0%, #F8912C 100%);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.priceBox {
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.price-li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 66rpx;
			padding: 0 20rpx;
		}
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {

			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}


	/deep/ .u-checkbox__label {
		margin-right: 12rpx !important;
	}
</style>
